import {useState} from "react";

const divStyle = {
    'align-items':'center',
    display:'flex',
}

const todoMsgStyle = {
    'margin-left':'10px'
}

const deleteContent = {
    'flex':'1',
    display: 'flex',
    'justify-content':'end'
}

const deleteButtonStyle = {
    'margin':'0'
}

const TodoLi = ({todo,dispatch})=>{
    const [showInput,setShowInput] = useState(false)
    const onChange = (e)=>{
        dispatch({
            type:'edit_todo',
            todoMsg:e.target.value,
            id:todo.id
        })
    }

    const onClick = ()=>{
        dispatch({
            type:'delete_todo',
            id:todo.id
        })
    }
    const Input = <input type={"text"}
                         value={todo.todoMsg}
                         onChange={onChange}
                         autoFocus={true}
                         onBlur={()=>setShowInput(false)}/>
    return (
        <div style={divStyle}>
            <input type='checkbox' checked={todo.isDone} onChange={()=>{
                dispatch({
                    type:'change_state_todo',
                    id:todo.id
                })
            }}/>
            <div style={todoMsgStyle}>
                {
                    showInput ? Input : <div onDoubleClick={()=>setShowInput(true)}>{todo.todoMsg}</div>
                }
            </div >
            <div style={deleteContent}>
                <button style={deleteButtonStyle} onClick={onClick}>删除</button>
            </div>
        </div>
    )
}

export default TodoLi